<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">

    <ui:define name="top">
        Reports
    </ui:define>

    <ui:define name="left">
    </ui:define>

    <ui:define name="body">
        

        <!-- Use Panel Grid, it's easier than doing HTML Tables, just tell panelGrid how many columns you want -->
        <h:panelGrid styleClass="panelColumns" columns="2">
            
            <h:outputText value="Start date"/>
            <h:outputText value="End date"/>
        <h:selectOneMenu id="startDate">
            <c:forEach items="#{orderCTRL.uniqueDates}" var="date">
                    <f:selectItem itemValue="#{fate}" itemLabel="#{date}"/>
            </c:forEach>
        </h:selectOneMenu>
        
        <h:selectOneMenu id="endDate">
            <c:forEach items="#{orderCTRL.uniqueDates}" var="date">
                    <f:selectItem itemValue="#{fate}" itemLabel="#{date}"/>
            </c:forEach>
        </h:selectOneMenu>
            
            <h:dataTable width="100%" value="#{orderCTRL.itemList}" var="item" border="0" cellpadding="2" cellspacing="0" rowClasses="jsfcrud_odd_row,jsfcrud_even_row" rules="all" style="border:solid 1px">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Name"/>
                    </f:facet>
                    <h:outputText value="#{item.name}"/>
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Price"/>
                    </f:facet>
                    <h:outputText value="$ #{item.price}"/>
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Stock"/>
                    </f:facet>
                    <h:outputText value="#{item.stock}"/>
                </h:column>
            </h:dataTable>
            
            
            <h:dataTable width="100%" value="#{orderCTRL.orderList}" var="order" border="0" cellpadding="2" cellspacing="0" rowClasses="jsfcrud_odd_row,jsfcrud_even_row" rules="all" style="border:solid 1px">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Order Number"/>
                    </f:facet>
                    <h:outputText value="#{order.id}"/>
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Date"/>
                    </f:facet>
                    <h:outputText value="#{order.date}"/>
                </h:column>
            </h:dataTable>
            
        </h:panelGrid>
    </ui:define>

</ui:composition>